<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style>
      ul {
        list-style-type: none;
      }

      ul li a {
        color: green;
        text-decoration: none;
        padding: 3px;
        display: block;
      }
      @media screen and (max-width: 699px) and (min-width: 520px) {
        ul li a {
          padding-left: 30px;
          background: url('https://www.runoob.com/try/demo_source/email-icon.png')
            left center no-repeat;
        }
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a data-email="johndoe@example.com" href="mailto:johndoe@example.com"
          >John Doe</a
        >
      </li>
      <li>
        <a data-email="marymoe@example.com" href="mailto:marymoe@example.com"
          >Mary Moe</a
        >
      </li>
      <li>
        <a
          data-email="amandapanda@example.com"
          href="mailto:amandapanda@example.com"
          >Amanda Panda</a
        >
      </li>
    </ul>
  </body>
</html>
